<!-- 基本信息 -->

<template>
  <div class="title-item">
    <a-space style="margin-left: 40px">
      <div
        style="
          width: 5px;
          height: 23px;
          background-color: rgba(61, 126, 255, 1);
          border: none;
          border-radius: 2px;
        "
      ></div>
      <div>基本信息</div></a-space
    >
  </div>
  <div class="contract-index">
    <div class="contract-item">
      <a-form
        ref="form"
        :model="currList.list"
        autoLabelWidth
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col
            v-for="element in contractForm.data.design.form"
            :key="element.id"
            :span="element.span"
          >
            <FormItem
              :name="element.name"
              :componentType="element.componentType"
              v-model:props="element.props"
              :required="element.required"
              v-model:values="element.values"
              :disabled="element.disabled"
            />
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import {
    GetOrderfiles,
    GetClientOrderDetail,
  } from '@/api/order-management/client-order/index';
  import { GetContractTypeSetting } from '@/api/contract-management/base-setting/type-contract/index';
  import { useRouter, useRoute } from 'vue-router';

  const router = useRouter();
  const route = useRoute();

  const currList = reactive<any>({
    list: {},
  });

  interface ContractType {
    data: {
      id: number;
      number: string;
      clientCompanyId: number;
      userStaffId: number;
      extend: string;
      orderTime: string;
      product: any;
      delivery: any;
      orderTemplateId: number;
      remark: string;
    };
  }
  const contract = reactive<any>({
    data: {
      number: '',
      name: '',
      extend: '',
      orderTime: '',
      endTime: '',
      ourSignUser: undefined,
      clientCompanyId: undefined,
      templateId: undefined,
      ctotalPrice: '',
      createBy: JSON.parse(sessionStorage.getItem('loginInfo')).id, // 创建者id
    },
  });

  interface ContractFormType {
    data: {
      design: {
        form: any[];
      };
    };
  }
  const contractForm = reactive<any>({
    data: { design: { form: [] } },
  });
  // 获取合同详情
  const getDetail = async (id: number) => {
    try {
      const res = await GetOrderfiles({ id, fileDetailsType: 1 });
      currList.list = res;
      contractForm.data.design.form = JSON.parse(currList.list.extend);
      contractForm.data.design.form.forEach((element) => {
        element.disabled = true;
      });
    } catch (error: unknown) {
      console.log(error);
    }
  };

  const getClientOrderInfo = async () => {
    const res = await GetClientOrderDetail({ id: Number(route.query.id) });
    getDetail(res.id);
    // headData.value = res;
  };

  onMounted(() => {
    getClientOrderInfo();
  });

  // 取消按钮
  const cancel = () => router.back();
</script>

<style scoped lang="less">
  .contract-index {
    padding: 16px;
    width: 95%;
    margin: 0 auto;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    .contract-item {
      width: 100%;
    }
    .addClient {
      position: absolute;
      margin-left: 20px;
      margin-top: -15px;
    }

    // :deep(.arco-input[disabled]),
    // :deep(.arco-textarea[disabled]) {
    //   -webkit-text-fill-color: #165dff;
    // }
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
</style>
